<template>
	<view class="home-page">
		<u-navbar leftIconColor="rgba(255,255,255,0.0)" :autoBack="false" :placeholder="true"
			bgColor="rgba(255,255,255,0.0)">
			<view slot="right">
				<u-icon name="setting" color="#fff" size="22" @click="gonavto('/pages/my/set/index')"></u-icon>
			</view>
		</u-navbar>
		<view class="head-box">
			<view class="head">
				<image :src="userInfo.avatar || '../../static/tabbar/my1.png'" mode=""></image>
			</view>
			<view class="head-left">
				<view class="name">
					{{userInfo.nickname||'暫無暱稱'}}
				</view>
				<view class="email">
					{{userInfo.userName}}
				</view>
				<view class="email">
					ID:{{userInfo.id}}
				</view>
			</view>
		</view>
		<view class="box">
			<view class="service">
				<view class="service-item" v-for="(item,index) in serviceList" :key="index" @click="gonavto(item.url)">
					<image :src="item.img" mode=""></image>
					<view class="service-text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="inlet-title">
				專屬入口
			</view>
			<view class="inlet">
				<image src="../../static/home/inlet.png" mode=""></image>
				<view class="inlet-cont">
					<view class="cont-title">
						經歷專屬入口，經歷專屬入口
					</view>
					<view class="cont-text">
						專業咨詢 | 產品解讀 | 保單查詢
					</view>
				</view>
				<view class="inlet-btn" @click="openPop(0)">
					立即咨詢
				</view>
			</view>
		</view>
		<view class="box">
			<view class="inlet-title">
				家庭成員（1份）
			</view>
			<view class="family">
				<view class="family-item" v-for="(item,index) in list" @click.stop="openPop(1,item)" :key="index">
					<view class="family-head">
						<image src="../../static/tabbar/my1.png" mode=""></image>
					</view>
					<view class="family-text">
						{{item.name}}
					</view>
					<view class="family-btn" @click.stop="godelete(item)">
						<u-icon name="close" color="#fff" size="10"></u-icon>
					</view>
				</view>
				<view class="add-item" @click="openPop(3)">
					<image src="../../static/home/add.png" mode=""></image>
					<view class="add-text">
						添加
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button size="large" color="linear-gradient(90deg, #0FD0A5 0%, #25CC84 100%)" shape="circle"
				@click="loginshow = true" type="primary" text="退出登錄"></u-button>
		</view>
		<u-popup :show="show" @close="close" mode="center" round="20">
			<view class="pop">
				<view v-if="status == 0">
					<view class="pop-title">
						請聯繫客服專員詳細了解 <br>如何成为****经理
					</view>
				</view>
				<view v-if="status == 1">
					<view class="pop-title">
						成員信息
					</view>
					<view class="pop-text">
						姓名：{{item.name}}
					</view>
					<view class="pop-text">
						關係：{{item.relationshipName}}
					</view>
					<view class="pop-text">
						年齡：{{item.age}}
					</view>
					<view v-if="item.accounts.length > 0">
						<view class="pop-text">
							保單：<text>无</text>
						</view>
						<view class="pop-text">
							收款銀行名稱 ：{{item.accounts[0].bankName}}
						</view>
						<view class="pop-text">
							收款銀行地址：{{item.accounts[0].bankAddress}}
						</view>
						<view class="pop-text">
							收款銀行帳號：{{item.accounts[0].bankAcount}}
						</view>
					</view>
				</view>
				<view v-if="status == 2">
					<view class="pop-title">
						成员信息
					</view>
					<view class="pop-text">
						姓名：张三
					</view>
					<view class="pop-text">
						保单编号：TW0254Y2025010141546
					</view>
					<view class="pop-text">
						每月缴纳：3000
					</view>
					<view class="pop-text">
						开始日期：2025年1月
					</view>
					<view class="pop-cont">
						<view class="pop-text">
							领取日期：
						</view>
						<view class="cont-right">
							<view class="cont-text">
								2055年1月 起每月领取<text>5000</text>RM
							</view>
							<view class="cont-text">
								2056年1月 起每月领取<text>6500</text>RM
							</view>
							<view class="cont-text">
								2058年1月 起每月领取<text>7800</text>RM
							</view>
						</view>
					</view>
					<view class="pop-text">
						收款银行：汇丰银行
					</view>
					<view class="pop-text">
						收款银行地址：槟城实时监控活动
					</view>
					<view class="pop-text">
						收款银行账号：15645465654465552
					</view>
				</view>
				<view v-if="status == 3">
					<view class="pop-title">
						添加成員
					</view>
					<view class="option-head" @click="upfun(1)">
						<image :src="head || '../../static/tabbar/my1.png'" mode=""></image>
						<view class="addhead">上传头像</view>
					</view>
					<view class="option-item" @click="option_show = true">
						<view style="font-size: 29rpx;" v-if="relation == '請選擇關係'">
							{{relation}}
						</view>
						<view style="font-size: 29rpx;color: #000;" v-else>
							{{relation}}
						</view>
						<u-icon name="arrow-down-fill" color="#999" size="14"></u-icon>
					</view>
					<view class="option-item">
						<u--input placeholder="請選擇姓名" border="none" v-model="name"></u--input>
					</view>
					<view class="option-item">
						<u--input placeholder="請選擇年齡" border="none" v-model="age"></u--input>
					</view>
					<view class="up-item" @click="upfun(2)" v-if="cordz == ''">
						+ 身份證人像面
					</view>
					<view class="up-item" @click="upfun(2)" v-else>
						<image :src="cordz" mode=""></image>
					</view>
					<view class="up-item" @click="upfun(3)" v-if="cordf == ''">
						+ 身份證國徽面
					</view>
					<view class="up-item" @click="upfun(3)" v-else>
						<image :src="cordf" mode=""></image>
					</view>
					<view class="pop-bottom">
						<view class="pop-btn new-btn" @click="addmember">
							保存
						</view>
					</view>
				</view>
				<view class="pop-bottom" v-if="status == 0">
					<view class="pop-btn new-btn" @click="close">
						確認
					</view>
				</view>
				<view class="close-btn" @click="close" v-if="status !=0">
					<u-icon name="close" color="#fff" size="12"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-modal :show="loginshow" :title="title" :showCancelButton="true" @confirm="confirm"
			@cancel="loginshow = false">
		</u-modal>
		<u-picker :show="option_show" keyName="label" :columns="columns" @cancel="option_show = false"
			@confirm="modifyInfo"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option_show: false,
				title: '是否退出登錄',
				loginshow: false,
				serviceList: [{
						img: '../../static/home/service1.png',
						text: '聯繫客服',
						url: ''
					},
					{
						img: '../../static/home/service2.png',
						text: '賬戶記錄',
						url: '/pages/my/record/index'
					},
					{
						img: '../../static/home/service3.png',
						text: '收款賬戶',
						url: '/pages/my/receive/index'
					}
				],
				show: false,
				status: 3,
				userInfo: {},
				relation: '請選擇關係',
				name: '',
				age: '',
				columns: [
					[]
				],
				id: 0,
				list: [],
				item: {},
				cordz: '',
				cordf: '',
				head: ''
			}
		},
		onLoad() {
			this.getrelations()
		},
		onShow() {
			this.getsuerinfo()
			this.getlist()
		},
		methods: {
			upfun(type) {
				const app = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: async function(res) {
						try {
							uni.showLoading({
								mask: true,
								title: '上传中'
							});
							const result = await app.uploadFilePromise(res.tempFilePaths[0]);
							if (type == 1) {
								app.head = result;
							}
							if (type == 2) {
								app.cordz = result
							}
							if (type == 3) {
								app.cordf = result
							}
						} catch (error) {
							uni.showToast({
								title: error.message,
								icon: 'none'
							});
						} finally {
							uni.hideLoading();
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://m.shuabanli.com:48080/app-api/infra/file/upload',
						filePath: url,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							try {
								let info = JSON.parse(res.data);
								if (info.code == 0) {
									resolve(info.data);
								} else {
									reject(new Error(info.msg || '上传失败'));
								}
							} catch (e) {
								reject(new Error('解析响应数据失败'));
							}
						},
						fail: (err) => {
							reject(new Error('上传请求失败'));
						}
					});
				});
			},
			godelete(item) {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否删除' + item.name,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								id: item.id
							}
							uni.showLoading({
								mask: true
							})
							app.$Request({
								method: 'GET',
								url: '/app-api/member/address/delete',
								data: params,
								ismsg: false,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 0) {
									uni.showToast({
										title: '删除成功'
									})
									app.getlist()
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getlist() {
				let params = {

				}
				this.$Request({
					method: 'GET',
					url: '/app-api/member/address/list',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data
					}
				})
			},
			close() {
				this.show = false
			},
			openPop(num, item) {
				if (num == 1) {
					this.item = item
				}
				this.status = num
				this.show = true
			},
			gonavto(url) {
				uni.navigateTo({
					url: url
				})
			},
			getsuerinfo() {
				let params = {

				}
				this.$Request({
					method: 'GET',
					url: '/app-api/member/user/get',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						this.userInfo = res.data
					}
				})
			},
			confirm() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/app-api/member/auth/logout',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.removeStorageSync('token');
						this.loginshow = false
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}, 1000)
					}
				})
			},
			addmember() {
				if (this.relation == '請選擇關係') {
					uni.showToast({
						title: '請選擇關係！',
						icon: 'none'
					})
					return
				}
				if (this.name == '') {
					uni.showToast({
						title: '請輸入姓名！',
						icon: 'none'
					})
					return
				}
				if (this.age == '') {
					uni.showToast({
						title: '請輸入年齡！',
						icon: 'none'
					})
					return
				}
				if (this.cordz == '') {
					uni.showToast({
						title: '請上傳身份證人像面！',
						icon: 'none'
					})
					return
				}
				if (this.cordf == '') {
					uni.showToast({
						title: '請上傳身份證國徽面！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					avarUrl: this.head,
					name: this.name,
					relationship: this.id,
					age: this.age,
					cardFrontUrl: this.cordz,
					cardBackUrl: this.cordf
				}
				this.$Request({
					method: 'POST',
					url: '/app-api/member/address/create',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.show = false
						this.getlist()
					}
				})
			},
			modifyInfo(index) {

				this.relation = index.value[0].label
				this.id = index.value[0].value
				this.option_show = false
			},
			getrelations() {
				let params = {
					type: 'bao_relations'
				}
				this.$Request({
					method: 'GET',
					url: '/app-api/system/dict-data/type',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						res.data.map(item => {
							this.columns[0].push(item)
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		background-image: url('../../static/real/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 362rpx;
		min-height: 90vh;
		padding: 30rpx;

		.pop {
			width: 620rpx;
			background: linear-gradient(180deg, #C9FFEF 0%, #FFFFFF 100%);
			padding: 30rpx;
			border-radius: 20rpx;
			text-align: center;
			position: relative;

			.pop-cont {
				display: flex;
				margin-top: 5rpx;

				.cont-text {
					font-size: 28rpx;

					text {
						color: #18BE8C;
					}
				}
			}

			.close-btn {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				background-color: #18BE8C;
				padding: 10rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.pop-text {
				text-align: left;
				font-size: 28rpx;

				text {
					color: #FF5050;
				}
			}

			.pop-bottom {
				display: flex;
				justify-content: space-around;
				margin-top: 50rpx;

				.pop-btn {
					padding: 15rpx 65rpx;
					border-radius: 30rpx;
					background-color: #F9F9F9;
					color: #666666;
					font-size: 26rpx;
				}

				.new-btn {
					background-color: #18BE8C;
					color: #fff;
				}
			}

			.option-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #F9F9F9;
				margin-top: 20rpx;
				color: rgb(192, 196, 204);
				font-size: 30rpx;
			}

			.option-head {
				padding: 20rpx 0;
				background-color: #F9F9F9;
				margin-top: 30rpx;
				color: rgb(192, 196, 204);

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.addhead {
					text-align: center;
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #666;
				}
			}

			.up-item {
				height: 300rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #F9F9F9;
				margin-top: 20rpx;
				color: rgb(192, 196, 204);
				font-size: 30rpx;
				text-align: center;
				line-height: 260rpx;

				image {
					width: 100%;
					height: 260rpx;
					border-radius: 10rpx;
				}
			}
		}

		.head-box {
			display: flex;
			align-items: center;

			.head {
				padding: 10rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, .58);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
				}
			}

			.head-left {
				margin-left: 20rpx;
				color: #fff;

				.name {
					font-size: 32rpx;
				}

				.email {
					margin-top: 10rpx;
					font-size: 24rpx;
				}
			}
		}

		.box {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 30rpx;
			box-shadow: 0rpx 7rpx 17rpx 1rpx rgba(20, 125, 80, 0.06);
			margin-top: 30rpx;

			.service {
				display: flex;
				justify-content: space-around;

				.service-item {
					text-align: center;
					padding: 10rpx 0;

					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
					}

					.service-text {
						font-size: 24rpx;
						color: #0B0B0B;
						margin-top: 5rpx;
					}
				}
			}

			.inlet-title {
				color: #0B0B0B;
				font-size: 30rpx;
				font-weight: bold;
			}

			.inlet {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				image {
					width: 92rpx;
					height: 86rpx;
				}

				.inlet-cont {
					.cont-title {
						font-size: 30rpx;
						color: #333333;
						font-weight: bold;
					}

					.cont-text {
						margin-top: 5rpx;
						font-size: 26rpx;
						color: #A7A7A7;
					}
				}

				.inlet-btn {
					color: #fff;
					font-size: 24rpx;
					background: linear-gradient(90deg, #0FD0A5 0%, #25CC84 100%);
					border-radius: 30rpx;
					padding: 10rpx 20rpx;
				}
			}

			.family {
				display: flex;
				flex-wrap: wrap;

				.family-item {
					width: 25%;
					text-align: center;
					margin-top: 30rpx;
					position: relative;

					.family-head {
						width: 78rpx;
						height: 78rpx;
						border: 2rpx solid #0FD0A5;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0 auto;

						image {
							width: 76rpx;
							height: 76rpx;
							border-radius: 50%;
						}
					}

					.family-text {
						color: #0B0B0B;
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.family-btn {
						position: absolute;
						top: -5rpx;
						right: 20rpx;
						background-color: #18BE8C;
						padding: 5rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.add-item {
					width: 25%;
					margin-top: 25rpx;
					text-align: center;

					image {
						width: 76rpx;
						height: 76rpx;
					}

					.add-text {
						color: #02B995;
						font-size: 24rpx;
					}
				}
			}
		}

		.btn {
			margin-top: 50rpx;
		}
	}
</style>